﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>帐号认证</title>
	<meta charset="utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="/SiteUI/Base.css" rel="stylesheet" />
    <link href="/LiberUI/Style/LiberUI.css" rel="stylesheet" />
    <link href="/SiteUI/Wechat/WegisteredAccount.css" rel="stylesheet" />
</head>
<body>
    <div id="MainPart">
        <div class="row procedure" >
            <img src="/SiteUI/Imgs/Wx-loginSteps2.png" />
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="col-lg-12" style="margin-bottom:3rem">
                    <input id="wx-name" type="text" placeholder="请输入真实姓名">
                </div>
                <div class="col-lg-12" id="picIDCard-face">
                    <div class="upperLeft " ></div>
                    <div class="upperRight"></div>
                    <div class="lowerLeft"></div>
                    <div class="lowerRight "></div>
                    <img  src="/SiteUI/Imgs/idcard-example-face.jpg"/>
                </div>
                <div class="col-lg-12" style="text-align:left;margin-bottom:2rem">
                    请按照图示方式手持身份证进行拍照上传，要求所有信息清晰可见,并不得做任何修改。<br />
                    <a id="seeExample" href="#"> 点击查看样例</a>
                </div>
                <div id="btnApply" class="button btn-big">提交个人认证</div>
               </div>
            </div>
        </div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
    <script src="/LiberUI/Scripts/jquery.js"></script>
    <script src="/LiberUI/Scripts/LiberUI.Base.js"></script>
    <script src="/LiberUI/Scripts/LiberUI.js"></script>
    <script src="/LiberUI/Scripts/LiberUI.Action.js"></script>
    <script>
        var AcntCertify = {
            serverId:null,
            WxdeployInfo:{
                debug: null,
                appId: null,
                timestamp: null,
                nonceStr: null,
                signature: null,
                jsApiList:null
            },
            certify: {
                phone: null,
                name: null,
                mail: null,
                socialid: null,
                idcardface: null
            },
            checkWxApprove: function (rtn) {
                if (rtn.IsPositive) {
                    AcntCertify.WxdeployInfo = rtn.Data;

                    //通过config接口注入权限验证配置
                    wx.config({
                        debug: AcntCertify.WxdeployInfo.debug, // 开启调试模式
                        appId: AcntCertify.WxdeployInfo.appId, // 公众号的唯一标识
                        timestamp:AcntCertify.WxdeployInfo.timestamp, //生成签名的时间戳
                        nonceStr: AcntCertify.WxdeployInfo.nonceStr, //生成签名的随机串
                        signature: AcntCertify.WxdeployInfo.signature,// 签名，
                        jsApiList: ['chooseImage', 'uploadImage', 'previewImage'] // 需要使用的JS接口列表
                    });

                    //通过ready接口处理成功验证
                    wx.ready(function () {
                        console.log("微信配置初始化完成");
                    });

                    //通过error接口处理失败验证
                    wx.error(function (res) {
                        console.log("微信配置："+res);//控制台输出具体错误信息 
                    });
                }
            },
            onPicFaceChange: function () {
                //判断当前客户端版本是否支持微信指定JS接口
                wx.checkJsApi({
                    jsApiList: ['chooseImage', 'uploadImage', 'previewImage'], // 需要检测的JS接口列表，
                    success: function (res) {
                        //可用的api值true，不可用为false
                        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        // if (res.Data.checkResult.chooseImage && res.Data.checkResult.reviewImage) {
                        wx.chooseImage({
                            count: 1, // 默认9
                            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                            success: function (res) {
                                var imgid= res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                $("#picIDCard-face>img").attr("src", imgid);
                                wx.uploadImage({
                                    localId: imgid, // 需要上传的图片的本地ID，由chooseImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        //console.log("上传成功：" + res.serverId);
                                        AcntCertify.serverId = res.serverId; // 返回图片的服务器端ID
                                        //下载微信图片
                                        $.getJSON("/File/FileAPI?mode=fromwx&filename=" + AcntCertify.serverId, function (rtn) {
                                            if (rtn.IsPositive) {
                                                AcntCertify.certify.idcardface = rtn.Data.path;
                                            }
                                            else {
                                                error("图片上传失败，请重新选择图片");
                                                return;
                                            }
                                        });
                                    }
                                });
                            },
                            fail: function (res) {
                                console.log("选图接口调用失败：" + res);//控制台输出具体错误信息 
                            }
                        });                     
                    }                 
                });
            },
            onSeeExampon: function () {
                wx.previewImage({
                    urls: ["https://tlunion.com/SiteUI/Imgs/idcard-example-face-big-mobile.jpg"] // 需要预览的图片http链接列表
                });
            },
            applyCertify: function () {
                if (!AcntCertify.checkRealName()) {
                    error("真实姓名不能为空");
                    return;
                }
                if (AcntCertify.certify.idcardface == null) {
                    error("请上传身份证照片");
                    return;
                }
                $.post("/MyBiz/ApplyCertify", AcntCertify.certify, AcntCertify.applyCertifyEnd);
                
            },
            applyCertifyEnd:function(rtn){
                if (rtn.IsPositive) {
                    success("成功,您的实名认证申请已提交",5, function () { window.location = "/WxPages/WxSetCompany.html"; });
                }
                else {
                    error("失败,"+ErrFormate(res_Sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error),5);
                }
            },
            checkRealName:function(){
                 var name=$("#wx-name").vl();
                 if (name.length > 0) {
                     AcntCertify.certify.name= name;
                     return true;
                 }
                 else {
                     return false;
                 }
            }
        }
        $(function () {
            $.getJSON("/MyBiz/GetUserInfo", null, function (rtn) {
                if (rtn.IsPositive) {
                    AcntCertify.certify.phone = rtn.Data.mphone;
                }
                else {
                    window.location = "/WxPages/WxRegister.html";
                }
            });
            $.getJSON("/TLB2B/GetJSSignature", { url: location.href.split('#')[0] }, AcntCertify.checkWxApprove);
            $("#picIDCard-face>img").on("click", AcntCertify.onPicFaceChange);
            $("#seeExample").on("click", AcntCertify.onSeeExampon);
            $("#btnApply").on("click", AcntCertify.applyCertify);
        })
    </script>
    <div id="tplPrompt" style="display:none">
        <div class="prompt_success">
            <div class="p_body">
                <span></span>
            </div>
        </div>
        <div class="prompt_info">
            <div class="p_body">
                <span></span>
            </div>
        </div>
        <div class="prompt_err">
            <div class="p_body">
                <span></span>
            </div>
        </div>
    </div>

    <script>
    window.success = function (msg, delay, fnCallback) {
        var cnt = $("#tplPrompt>.prompt_success").clone();;
        cnt.children(".p_body").children("span").vl(msg);
        var p = new LiberUI.Prompt(cnt);
        p.option("Delay", delay);
        p.update();
        if (ObjHelper.IsFunc(fnCallback)) {
            p.on("disposed", fnCallback);
        }
        return p.show();

    };
    window.info = function (msg, delay,fnCallback) {
        var cnt = $("#tplPrompt>.prompt_info").clone();
        cnt.children(".p_body").children("span").vl(msg);
        var p = new LiberUI.Prompt(cnt);
        p.option("Delay", delay);
        p.update();
        if (ObjHelper.IsFunc(fnCallback)) {
            p.on("disposed", fnCallback);
        }
        return p.show();
    };
    window.error = function ( msg, delay, fnCallback) {
        var cnt = $("#tplPrompt>.prompt_err").clone();
        cnt.children(".p_body").children("span").vl(msg);
        var p = new LiberUI.Prompt(cnt);
        p.option("Delay", delay);
        p.update();
        if (ObjHelper.IsFunc(fnCallback)) {
            p.on("disposed", fnCallback);
        }
        return p.show();
    };

    window.log = function (msg) {
        if (console) {
            console.log(msg);
        }
    };
    </script>
</body>
</html>
